<template>
    <view class="tip" v-show="show">
    	<view class="btn" style="border-bottom: 1rpx solid #e7e7e7;border-radius: 10rpx 10rpx 0rpx 0rpx;" @click="handleCamera">
    		拍摄
    	</view>
		<view class="btn" style="border-bottom: 1rpx solid #e7e7e7;border-radius: 0rpx 0rpx 10rpx 10rpx;" @click="handleAlbum">
			从相册选择
		</view>
		<view class="btn" style="margin-top: 20rpx;border-radius: 10rpx;" @click="handleClose">
			取消
		</view>
    </view>
</template>

<script setup>
	const emit = defineEmits(['camera', 'album', 'close']);
	
    const props = defineProps({
    	show: {
    		type: Boolean,
    		default: false
    	}
    });
	
	const handleCamera = (() =>{
		emit('camera');
	})
	
	const handleAlbum = (() =>{
		emit('album');
	})
	
	const handleClose = (() =>{
		emit('close');
	})
</script>

<style lang='scss' scoped>
    .tip{
		padding: 30rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		z-index: 999;
		
		.btn{
			padding: 20rpx;
			width: 90vw;
			font-size: 28rpx;
			background-color: #fff;
			text-align: center;
		}
	}
</style>